<script setup>
import {ref} from 'vue'
let str =ref("<p style='color:red'>这是我的段落标签 </p>")
let place=ref("请输入密码")
let sty=ref("hight:50px background-color:red;")
let denji=ref('A')
</script>
<!-- 
    v-bind:单向绑定
    v-model :双向绑定:参数number(转换为数值型) lazy(懒加载) trim(忽视行首行尾空白值)
    v-on：事件绑定
    v-html v-text：内容渲染指令

 -->

<template>
        {{str}}
    <div v-html="str">
    </div>
    <hr>
    <div v-text="str">
    </div>
    <input type="text" style="height:50px" placeholder="请输入你的值">
<!-- 
    条件渲染指令
-->
    <h1>条件渲染指令</h1>
    <p>
        条件渲染指令：v-if  v-v-show
        v-if v-else-if  v-else
    </p>
    <p>成绩等级:{{denji}}</p>
    <p>成绩等级：
        <span v-if="denji=='A'">优秀</span>
        <span v-else-if="denji=='B'">良好</span>
        <span v-else-if="denji=='C'">及格</span>
        <span v-else>不及格</span>
    </p>
    <p>
        成绩等级：
         <span v-show="denji=='A'">优秀</span>
        <span v-show="denji=='B'">良好</span>
        <span v-show="denji=='C'">及格</span>
        <span v-show="denji=='D'">不及格</span>               
    </p>
    <input v-model="denji" type="text" ></input>
</template>
